
import styled from 'styled-components';

import React, { ReactNode, CSSProperties } from 'react';

import { Card } from 'antd';

export const CardItem = (props: {
    icon?: ReactNode,
    title: ReactNode,
    description?: ReactNode,
    extra?: ReactNode,
    actions?: Array<ReactNode>,
    active?: boolean,
    reverseFill?: boolean,
    fillColor?: string,
    color?: string,
    activeFillColor?: string,
    activeColor?: string,
    height?: number,
    width?: number,
    onClick?: () => Promise<void>
}) => {

    let { fillColor, color, activeFillColor, activeColor, width, height } = props;

    if (!activeFillColor) {
        activeFillColor = '#FFF';
    }
    if (!activeColor) {
        activeColor = '#0091FF';
    }

    let containerStyle: CSSProperties = {
        overflow: 'hidden',
        width: `${width ? width : 260}px`,
        height: `${height ? height : 200}px`
    };

    let iconStyle: CSSProperties = {
        width: `${width ? width : 240}px`,
        height: `${(height ? height : 200) * 0.6}px`
    };

    let titleStyle: CSSProperties = {
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    };

    let descriptionStyle: CSSProperties = {
    };

    if (props.active) {
        if (props.reverseFill) {
            iconStyle.fontWeight = 900;
            titleStyle.fontWeight = 900;
            iconStyle.color = activeFillColor;
            titleStyle.color = activeFillColor;
            descriptionStyle.color = activeFillColor;
            containerStyle.backgroundColor = activeColor;
        } else {
            iconStyle.fontWeight = 900;
            titleStyle.fontWeight = 900;
            iconStyle.color = activeColor;
            titleStyle.color = activeColor;
            descriptionStyle.color = activeColor;
            containerStyle.backgroundColor = activeFillColor;
        }
    } else {
        if (props.reverseFill) {
            iconStyle.color = fillColor;
            titleStyle.color = fillColor;
            descriptionStyle.color = fillColor;
            containerStyle.backgroundColor = color;
        } else {
            iconStyle.color = color;
            titleStyle.color = color;
            descriptionStyle.color = color;
            containerStyle.backgroundColor = fillColor;
        }
    }

    return (
        <>
            <StyledCard
                style={containerStyle}
                hoverable
                actions={props.actions} extra={props.extra}
                cover={props.icon && props.icon !== '' ? <div style={iconStyle}>{props.icon!}</div> : undefined}
                onClick={props.onClick}>
                <Card.Meta
                    title={<span style={titleStyle}>{props.title}</span>}
                    description={<Description style={descriptionStyle}>{props.description}</Description>}
                />
            </StyledCard>
        </>
    );
};

export default CardItem;

const StyledCard = styled(Card)`

`;

const Description = styled.span`
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
`;
